<template>
  <div class="detailImgInfo">
    <div class="top">
      <div class="line1"></div>
      <div class="desc">{{ info.desc }}</div>
      <div class="line2"></div>
    </div>
    <div class="content" v-for='(item1,index1) in info' :key='index1'>
      <div class="title">{{item.key}}</div>
      <div class="imgInfoBox">
        <img v-for="(item, index) in item1.list" :key='index' :src="item" alt="">
      </div>
      <div>
        <!-- <img v-for="(item,index) in detailImgInfo.list" :key='index' :src="item" alt=""> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailImgInfo",
  props: ["detailInfo"],
  data() {
    return {
      info:{}
    };
  },
  created() {
    console.log(this.detailInfo);
  },
  mounted() {
    this.info = this.detailInfo;
  },
  computed: {},
};
</script>

<style scoped>
.detailImgInfo {
  padding: 15px 10px;
}
.top {
  position: relative;
}
.top .line1 {
  height: 1px;
  width: 30%;
  background-color: #000;
}
.top .line1::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #000;
  position: relative;
  top: -14px;
}
.top .line2 {
  width: 30%;
  background-color: #000;
  height: 1px;
  position: absolute;
  bottom: -15px;
  right: 0;
}
.top .line2::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #000;
  position: absolute;
  top: -4px;
  right: 0;
}
.top .desc {
  margin-top: 10px;
  margin-bottom: 10px;
}
.imgInfoBox {
  margin-top: 15px;
}
.content img {
  width: 100%;
}
</style>